* {
    margin: 0px;
    padding: 0px;
}

ul li {
    list-style: none;
}

h2 {
    margin-bottom: 20px;
}

h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.red {
    color: red;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.none {
    display: none !important;
}

.relative {
    position: relative;
}

.wrap {
    background-color: #dddddd;
    width: 800px;
    padding: 20px;
    margin: 20px auto;
}

.wrap img {
    width: 100%;
    height: auto;
}

.demo1 {
    display: grid;
    width: 100%;
}

.demo1 li {
    width: 300px;
    box-sizing: border-box;
    border: 1px dashed pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo2 {
    /* width: 100%; */
    display: inline-grid;
}

.demo2 li {
    width: 300px;
    box-sizing: border-box;
    border: 1px dashed pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo3 {
    /* width: 100%; */
    display: grid;

    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 300px;
}

.demo3 li {
    width: 300px;
    box-sizing: border-box;
    border: 1px dashed pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo4 {
    width: 100%;
    display: grid;

    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(2, 300px);
}

.demo4 li {
    /* width: 300px; */
    box-sizing: border-box;
    border: 1px dashed pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo5 {
    width: 100%;
    display: grid !important;

    grid-template-columns: repeat(2, 30% 20%);
    grid-template-rows: repeat(2, 50%);
}

.demo5 div {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo6 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(2, 50%);
}

.demo6 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo7 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 50%);
}

.demo7 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo8 {
    /* height: 100px; */
    width: 100%;
    display: grid !important;
    grid-template-columns: 150px 1fr 2fr;
    grid-template-rows: repeat(2, 50%);
}

.demo8 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.newdemo9 {
    height: 100px;
    width: 200px;
    display: grid !important;
    grid-template-columns: 1fr 1fr minmax(100px, 1fr);
    grid-template-rows: repeat(2, 50%);
}

.newdemo9 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo9 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: repeat(2, 50%);
}

.demo9 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo10 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px 20px;
}

.demo10 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo11 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    grid-gap: 20px 20px;
    grid-template-areas: 'a b c'
        'd e f'
        'g h i';
}

.demo11 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo12 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(2, 1fr); */
    grid-gap: 20px 20px;
    grid-template-areas: 'a a a'
        'b b b'
        'c c c';
}

.demo12 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo13 {
    height: 100px;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 20px 20px;
    grid-auto-flow: column;
}

.demo13 li,
.demo14 li,
.demo15 li {
    height: 100%;
    box-sizing: border-box;
    border: 1px dashed rgb(85, 33, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo14 {
    /* height: 100px; */
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 30px);
    grid-gap: 20px 20px;
    grid-auto-flow: row dense;
}

.demo15 {
    /* height: 100px; */
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 30px);
    grid-gap: 20px 20px;
    grid-auto-flow: column dense;
}

.demo16 {
    position: absolute;
    /* top: 0px;
    left: 0px; */
    /* height: 100px; */
    width: 800px;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 40px);
    grid-gap: 20px 20px;
    /* justify-items: start;
    align-items: center; */
    /* place-items:center start; */
    place-items: start center;

}

.demo17 {
    /* height: 100px; */

    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 40px);
    grid-gap: 20px 20px;

    /* display: none !important; */


}

.demo16 li {
    width: 50%;
    box-sizing: border-box;
    border: 1px dashed rgb(255, 36, 145);
}

.demo17 li {
    width: 100%;
    /* height: 23px; */
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo18 {

    border: 1px solid rgb(189, 189, 189);
    width: 100%;
    height: 160px;
    display: grid !important;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(3, 23px);
    grid-gap: 20px 20px;

    justify-content: start;
    align-content: start;


}

.demo18 li {
    color: #fff;
    width: 100%;
    height: 23px;
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo19 {
    border: 1px solid rgb(189, 189, 189);
    width: 100%;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 23px);
    grid-gap: 20px 20px;
    grid-auto-rows: 46px;
    grid-auto-columns: 150px;

    grid-auto-flow: column
}

.demo19 li {
    color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo19 li:nth-child(8) {
    grid-row-start: 4;
    grid-column-start: 2;
}

.demo19 li:nth-child(9) {
    grid-row-start: 5;
    grid-column-start: 4;
}


.demo20 {
    border: 1px solid rgb(189, 189, 189);
    width: 100%;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 23px);
    grid-gap: 20px;
    grid-auto-rows: 46px;
    grid-auto-flow: row dense;
}

.demo20 li {
    color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo20 li:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 4;
}


.demo21 {
    border: 1px solid rgb(189, 189, 189);
    width: 100%;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 23px);
    grid-gap: 20px;
    grid-auto-rows: 46px;
    grid-auto-flow: row dense;
}

.demo21 li {
    color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo21 li:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

.demo21 li:nth-child(7) {
    grid-column-start: span 3;

}

.demo21 li:nth-child(8) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 5;
    background-color: rgba(255, 124, 124, 0.2);

    z-index: 2;
}

.demo21 li:nth-child(9) {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 5;
    background-color: rgba(218, 255, 96, 0.2);
}

.demo22 {
    border: 1px solid rgb(189, 189, 189);
    width: 100%;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 23px);
    grid-gap: 20px;
    grid-template-areas: 'a b c'
        'd e f'
        'g h i';

}

.demo22 li {
    color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo22 li:nth-child(1) {
    grid-area: e;
}

.demo23 {
    border: 1px solid rgb(189, 189, 189);
    width: 100%;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 23px);
    grid-auto-rows: 46px;
    grid-gap: 20px;
    grid-template-areas: 'a a a'
        'b b b'
        'c c c';

}

.demo23 li {
    color: #fff;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #7c7c7c;
}

.demo23 li:nth-child(1) {
    grid-area: b;
}

.demo24 {
    position: absolute;
    border: 1px solid rgb(189, 189, 189);
    width: 800px;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 46px);
    grid-auto-rows: 46px;
    grid-gap: 20px;


}



.demo24 li {
    color: #fff;
    width: 50%;
    height: 23px;
    box-sizing: border-box;
    background-color: #7c7c7c;
}


.demo24 li:nth-child(1) {
    justify-self: center;
    align-self: center;
}

.demo24 li:nth-child(2) {
    justify-self: end;
    align-self: end;
}

.demo25 {
    border: 1px solid rgb(250, 197, 197);
    width: 100%;
    /* height: 160px; */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 46px);
    grid-auto-rows: 46px;
    grid-gap: 20px;


}

.demo25 li {
    color: #fff;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    background-color: #ffb2b2;
}